<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs">
      <t-chip
        removable
        v-model="icecream"
        @remove="log('Icecream')"
        color="primary"
        text-color="white"
        icon="cake"
      >
        Ice cream
      </t-chip>
      <t-chip
        removable
        v-model="eclair"
        @remove="log('Icecream')"
        color="teal"
        text-color="white"
        icon="cake"
      >
        Eclair
      </t-chip>
      <t-chip
        removable
        v-model="cupcake"
        @remove="log('Icecream')"
        color="orange"
        text-color="white"
        icon="cake"
      >
        Cupcake
      </t-chip>
      <t-chip
        disable
        removable
        v-model="gingerbread"
        @remove="log('Icecream')"
        color="red"
        text-color="white"
        icon="cake"
      >
        Gingerbread (disable)
      </t-chip>
    </div>

    <t-btn
      color="primary"
      label="Reset"
      @click="onResetClick"
      class="q-mt-sm"
    />
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const icecream = ref(true);
      const eclair = ref(true);
      const cupcake = ref(true);
      const gingerbread = ref(true);

      return {
        icecream,
        eclair,
        cupcake,
        gingerbread,

        onResetClick() {
          icecream.value = true;
          eclair.value = true;
          cupcake.value = true;
          gingerbread.value = true;
        },

        log(desert) {
          // console.log(`${desert} has been removed`)
        },
      };
    },
  };
</script>
